<template>
  <easy-window title="设置备注和标签" ref="easyWindowRef" @confirm="handleSubmit">
    <div class="app-container">
      <n-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-placement="top"
      >
        <n-form-item label="备注名" path="remarkName">
          <n-input v-model:value="formData.remarkName" />
        </n-form-item>
        <n-form-item label="标签" path="tag">
          <n-select v-model:value="formData.tag" multiple filterable tag :options="tagOptions" placeholder="搜索或创建标签" />
        </n-form-item>
        <n-form-item label="电话" path="phone">
          <n-input v-model:value="formData.phone" />
        </n-form-item>
        <n-form-item label="描述" path="description">
          <n-input v-model:value="formData.description" placeholder="添加更多备注信息" />
        </n-form-item>
      </n-form>
    </div>
  </easy-window>
</template>

<script setup>
import EasyWindow from "@/components/EasyWindow.vue";
import { ref } from "vue";

const easyWindowRef = ref(null)
const formRef = ref(null);
const formData = ref({
  remarkName: "",
  tag: [],
  phone: "",
  description: "",
});
const rules = ref({
  remarkName: [
    {
      required: true,
      message: "请输入备注名",
      trigger: "blur",
    },
  ],
})

const tagOptions = [
  { value: "1", label: "家人", },
  { value: "2", label: "朋友", },
  { value: "3", label: "同事", },
  { value: "4", label: "王八蛋", },
];

const handleSubmit = () => {
  console.log('提交')
  formRef.value?.validate().then(() => {
    console.log(formData.value);
  });
};

</script>

<style scoped>

</style>
